<template>
  <div class="layout">
    <Layout>
      <Layout>
        <Header :style="{padding: 0,margin: '20px'}" class="layout-header-bar">
          <Row>
            <Col span="2" style="text-align: center">司机名称：</Col>
            <Col span="7">
              <Input v-model="driver.name" placeholder="请输入司机名称" style="width: 300px" />
            </Col>
            <Col span="2" style="text-align: center">所属车队：</Col>
            <Col span="7">
              <Select v-model="driver.fleet_id" style="width:85%">
                <Option v-for="item in motorcadeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </Col>
            <Col span="5">
              <Button type="error" icon="ios-search" @click="queryDriverInfo" >查询</Button>
              <Button @click="clearInputVal" style="margin:  0 0 0 40px" icon="md-refresh" >重置</Button>
            </Col>
          </Row>
        </Header>
        <Content :style="{margin: '20px', background: '#fff', minHeight: '520px'}">
          <Table  border :columns="columns12" :data="page.list" style="margin: 20px;line-height: 20px">
            <template slot-scope="{ row }" slot="name">
              {{row.name}}
            </template>
            <template slot-scope="{ row, index }" slot="action">
<!--              <Button type="primary" size="small" style="margin-right: 5px" @click="openRouteToInfo(row.myid)">查看详情</Button>-->
              <Button type="info" size="small" style="margin-right: 5px" :to="{path:'/sp-basics/driver_info/info_1',query:{id: row.id}}">查看详情</Button>
              <Button type="error" size="small" @click="openDialog(row.name,row.fleetId,row.userId)">编辑车队</Button>
            </template>
          </Table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="driver.currentPage"
            :page-sizes="[3 ,5 ,7]"
            :page-size="driver.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            style="text-align: center">
          </el-pagination>
        </Content>
      </Layout>
    </Layout>
    <Modal
      v-model="modal"
      title="修改车队"
      :loading="loading"
      @on-ok="asyncOK">
      <Row style="margin: 20px 0">
        <Col span="4" style="text-align: right">司机名称</Col>
        <Col span="20" style="text-align: center">
          <Input v-model="updDriver.disDriverName" disabled style="width: 80%"/>
        </Col>

      </Row>
      <Row style="margin: 20px 0">
        <Col span="4" style="text-align: right">车队</Col>
        <Col span="20" style="text-align: center">
          <Select v-model="updDriver.fleetId" style="width:80%">
            <Option v-for="item in motorcadeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>

import axios from "axios";
export default {
  data () {
    return {
      isCollapsed: false,
      driver:{
        currentPage: 1,
        pageSize: 3
      },
      motorcadeList: [],
      columns12: [
        {
          type: 'index',
          width: 80,
          align: 'center',
          title: '序号'
        },
        {
          title: '司机编号',
          key: 'id',
          align: 'center'
        },
        {
          title: '司机姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '司机电话',
          key: 'mobile',
          align: 'center'
        },
        {
          title: '所属机构',
          key: 'cname',
          align: 'center'
        },
        {
          title: '所属车队',
          key: 'fname',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 0,
          align: 'center'
        }
      ],
      modal : false,
      loading: true,
      updDriver:{},
      page:{}

    }
  },
  created(){
      this.queryMotorcadeInfo();
      this.queryDriverInfo();
  },
  methods:{
    // 查询司机信息
    queryDriverInfo: async function () {
      var rsp = await axios.post("/api/pd-baseyc/pd-truck-driver/queryAllDriverInfo",this.driver);
      // console.log(rsp.data);
      this.page = rsp.data;
    },

    handleSizeChange(val) {
      this.driver.pageSize = val;
      this.queryDriverInfo();
    },
    handleCurrentChange(val) {
      this.driver.currentPage = val;
      this.queryDriverInfo();
    },


    // 查询车队信息
    queryMotorcadeInfo: async function () {
      var rsp = await axios.post("/api/pd-aggregationcjj/pd-fleet/queryCoreOrgListAll");
      // console.log(rsp.data.data)
      this.motorcadeList = rsp.data.data;
    },

    // 重置按钮
    clearInputVal(){
      this.driver.name=null;
      this.driver.fleet_id=null;
      this.queryDriverInfo();
    },
    //  编辑车队信息
    openDialog(name,fleetId,userId){
      this.modal = true;
      // console.log(name)
      this.updDriver.userId = userId;
      this.updDriver.fleetId=fleetId;
      this.updDriver.disDriverName = name;
    },

    // 延时关闭编辑车队对话框
     asyncOK: async function () {
        var rsp = await axios.post("/api/pd-baseyc/pd-truck-driver/updateDriverFleetId",
          {
            userId : this.updDriver.userId,
            fleetId : this.updDriver.fleetId
          });
        if (rsp.data==true){
          this.queryDriverInfo();
        }

      setTimeout(() => {
        this.modal = false;
      }, 1500);
    },

  }

}
</script>

<style scoped>

  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
  .layout-header-bar{
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }

</style>
